import React, {Component} from 'react';
import {StyleSheet} from 'react-native';
import {Button, Text} from 'native-base';
import Dropdown from '../../../../components/Dropdown';
import Icon from '../../../../components/Icon';
import {themeColor, themTextColor} from '../../../../config/config';
import {connect} from 'react-redux';

const styles = StyleSheet.create({
	dropdownStyle: {
		backgroundColor: themeColor(),
		height: 91,
		borderBottomLeftRadius: 8
	},
	button: {
		flexDirection: 'row'
	},
	text: {
		color: themTextColor()
	}
});

@connect(state => ({state: {...state.home}}))
export default class GroupDropdown extends Component {
	
	render() {
		const {dispatch} = this.props;
		return (
			<Dropdown 
			ref='groupOp' 
			adjustFrame={(position) => {
				position.top = position.top + 3;
				position.right = 0;
				return position;
			}} 
			dropdownStyle={styles.dropdownStyle} 
			options={[
				(
					<Button transparent style={styles.button} onPress={() => {
						dispatch({type: 'home/toGroupCreate'});
						this.refs.groupOp.hide();
					}}>
		    			<Icon type='createGroup' fill={themTextColor()} width={22} height={22} />
		    			<Text style={styles.text}>创建群组</Text>
	    			</Button>
				),
				(
					<Button transparent style={styles.button} onPress={() => {
						dispatch({type: 'home/toGroupJoin'});
						this.refs.groupOp.hide();
					}}>
						<Icon type='joinGroup' fill={themTextColor()} width={22} height={22} />
		    			<Text style={styles.text}>加入群组</Text>
	    			</Button>
				)
			]}>
				<Button transparent onPress={() => {
					this.refs.groupOp.show();
				}}>
					<Icon 
					type='morePoint' 
					fill={themTextColor()} 
					width={20} 
					height={20} 
					/>
				</Button>
			</Dropdown>
		);
	}
	
}
